<template>
    <div class="orthographicimageoverview">
        <pagetitle type="2"></pagetitle>
        <div class="pageBox">
            <div class="pageleft">
                <el-card>
                    <div class="top">
                        <div class="toptext">重庆三峡农夫有限公司<img style="width: 16px" src="@/assets/image/3.png" alt="" /></div>
                        <div class="toptextBox">
                            <div class="toptextitem" v-for="(item, index) in topItem" :key="index">
                                {{ item.val }}
                                <p>{{ item.name }}<el-button v-if="item.btn" type="primary" text>充值</el-button></p>
                            </div>
                        </div>
                    </div>
                </el-card>
                <div class="pageItem">
                    <!-- <div id="main" ref="main" style="width: 600px; height: 400px"></div> -->
                    <div class="pageItembox">
                        <el-card v-for="(item, index) in charts" :key="index" style="width: 24%">
                            <div class="serchbox">{{ item.title }}</div>
                            <!-- <el-image style="width: 100px; height: 100px" :src="require(item.img)" fit="cover" /> -->
                            <center>
                                <img v-if="item.img == '1'" src="@/assets/image/1.png" alt="" style="width: 144px; height: 144px; margin-bottom: 20px" />
                                <img v-else src="@/assets/image/2.png" alt="" style="width: 144px; height: 144px; margin-bottom: 20px" />
                            </center>
                            <div class="dot">
                                <div class="dotItem">
                                    <div class="dotItem1 dotItemc"></div>
                                    {{ item.t1 }}
                                </div>
                                <div class="dotItem">
                                    <div class="dotItem2 dotItemc"></div>
                                    {{ item.t2 }}
                                </div>
                            </div>
                            <div class="dot">
                                <div class="dotItem">
                                    <div class="dotItem3 dotItemc"></div>
                                    {{ item.t3 }}
                                </div>
                                <div class="dotItem">
                                    <div class="dotItem4 dotItemc"></div>
                                    {{ item.t4 }}
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
                <div class="pageItem">
                    <div class="pageItembox">
                        <el-table :data="tabelData" border class="tableheader" style="width: 930px; margin-right: 20px; border-radius: 6px">
                            <el-table-column prop="data1" label="状态"></el-table-column>
                            <el-table-column prop="data2" label="正摄影像" />
                            <el-table-column prop="data3" label="正摄瓦片" />
                            <el-table-column prop="data4" label="等高线图" />
                            <el-table-column prop="data5" label="蓝图绘制" />
                        </el-table>
                        <el-card style="width: 300px">
                            <div class="top">
                                <div class="toptext">费用管理</div>
                                <div class="setupbarItem" v-for="(item, index) in setupbarItem" :key="index">
                                    <div class="itemtop">
                                        <div class="itemtopleft">
                                            <div>{{ item.title }}</div>
                                            <span>{{ item.tip }}</span>
                                        </div>
                                        <el-button type="primary" link>{{ item.btn }}</el-button>
                                    </div>
                                    <el-progress :percentage="item.num" :show-text="false" />
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <el-card class="pageright">
                <div class="rightItem">
                    <div class="titles">平台公告<el-button type="primary" link>更多</el-button></div>
                    <div class="announcementItem text-overflow1" v-for="item in 6">2022/10/26【管理公告】三峡农夫公司......</div>
                </div>
                <div class="rightItem rightItemt">
                    <div class="titles">为你推荐<el-button type="primary" link>更多</el-button></div>
                    <div class="recommend">
                        <div class="bg bg1" style="background: linear-gradient(45deg, rgba(60, 121, 180, 0.88) 0%, #78a3cc 100%)">
                            <img src="@/assets/image/4.png" alt="" srcset="" />
                        </div>
                        <div class="text">
                            <p>测绘服务</p>
                            <div class="text-overflow2">通过正摄影像拍摄，合成tif文件，上传到平台； 通过平台计算实现偏移；通过软件合成瓦片图。</div>
                        </div>
                    </div>
                    <div class="recommend">
                        <div class="bg bg2" style="background: linear-gradient(44deg, rgba(35, 150, 93, 0.88) 0%, #43bb73 100%)">
                            <img src="@/assets/image/5.png" alt="" srcset="" />
                        </div>
                        <div class="text">
                            <p>等高线服务</p>
                            <div class="text-overflow2">通过正摄影像拍摄，合成tif文件，上传到平台； 通过平台计算实现偏移；通过软件合成瓦片图。</div>
                        </div>
                    </div>
                    <div class="recommend">
                        <div class="bg bg3" style="background: linear-gradient(41deg, rgba(77, 152, 46, 0.88) 0%, #70b643 100%)">
                            <img src="@/assets/image/6.png" alt="" srcset="" />
                        </div>
                        <div class="text">
                            <p>蓝图服务</p>
                            <div class="text-overflow2">通过正摄影像拍摄，合成tif文件，上传到平台； 通过平台计算实现偏移；通过软件合成瓦片图。</div>
                        </div>
                    </div>
                </div>
                <div class="rightItem rightItemt rightItemend">
                    <div class="titles">优秀解决方案<el-button type="primary" link>更多</el-button></div>
                    <div class="recommend">
                        <img src="https://gd-hbimg.huaban.com/faef2d25270faaf5d207a32d4f6af9f65be2a76a106a8-8saW1K_fw1200" alt="" srcset="" />
                        <div class="text">
                            <p>水费一体化解决方案</p>
                            <div class="text-overflow2">帮助果园实现金园监控，实现对果园 防盗、果园生长情况等系统解决方案</div>
                        </div>
                    </div>
                    <div class="recommend">
                        <img src="https://gd-hbimg.huaban.com/faef2d25270faaf5d207a32d4f6af9f65be2a76a106a8-8saW1K_fw1200" alt="" srcset="" />
                        <div class="text">
                            <p>四情监测解决方案</p>
                            <div class="text-overflow2">帮助果园实现金园监控，实现对果园 防盗、果园生长情况等系统解决方案</div>
                        </div>
                    </div>
                    <div class="recommend">
                        <img src="https://gd-hbimg.huaban.com/faef2d25270faaf5d207a32d4f6af9f65be2a76a106a8-8saW1K_fw1200" alt="" srcset="" />
                        <div class="text">
                            <p>园区安防解决方案</p>
                            <div class="text-overflow2">帮助果园实现金园监控，实现对果园 防盗、果园生长情况等系统解决方案</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <!-- <el-card class="pageItem"> </el-card> -->
    </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref } from "vue";
const topItem = [
    {
        val: "5",
        name: "正摄影像",
    },
    {
        val: "5",
        name: "正摄瓦片",
    },
    {
        val: "5",
        name: "等高线图",
    },
    {
        val: "5",
        name: "蓝图绘制",
    },
    {
        val: "￥5161",
        name: "账户余额",
        btn: true,
    },
];
const charts = [
    {
        title: "空间总量：1352M",
        img: "1",
        t1: "等高线图",
        t2: "正摄影像",
        t3: "蓝图",
        t4: "未使用",
    },
    {
        title: "正摄影像：1352M",
        img: "2",
        t1: "占用1",
        t2: "其他",
        t3: "占用2",
        t4: "占用3",
    },
    {
        title: "等高线图：1352M",
        img: "2",
        t1: "占用1",
        t2: "其他",
        t3: "占用2",
        t4: "占用3",
    },
    {
        title: "蓝图：1352M",
        img: "2",
        t1: "占用1",
        t2: "其他",
        t3: "占用2",
        t4: "占用3",
    },
];
const tabelData = [
    {
        data1: "需求已提交",
        data2: "3",
        data3: "3",
        data4: "3",
        data5: "3",
    },
    {
        data1: "审核中",
        data2: "3",
        data3: "3",
        data4: "3",
        data5: "3",
    },
    {
        data1: "修改中",
        data2: "0",
        data3: "0",
        data4: "0",
        data5: "0",
    },
    {
        data1: "不采纳",
        data2: "3",
        data3: "3",
        data4: "3",
        data5: "3",
    },
    {
        data1: "已审核",
        data2: "0",
        data3: "0",
        data4: "0",
        data5: "0",
    },
];
const setupbarItem = [
    {
        num: 30,
        title: "【已购买空间】",
        tip: "空间2000.00M",
        btn: "购买",
    },
    {
        num: 0,
        title: "【待支付订单】",
        tip: "3个",
        btn: "处理",
    },
    {
        num: 0,
        title: "【7天到期资讯】",
        tip: "3个",
        btn: "处理",
    },
    {
        num: 0,
        title: "【月到期资讯】",
        tip: "10个",
        btn: "处理",
    },
    {
        num: 0,
        title: "【消费情况】",
        tip: "1234元",
        btn: "处理",
    },
];
const main: any = ref(null);
// const myChart = echarts.init(document.getElementById("main"));
// console.log(echarts, main, 11);
setTimeout(() => {
    // const myChart = echarts.init(document.getElementById("main"));
    // console.log(document.getElementById("main"));
    // myChart.setOption({
    //     title: {
    //         text: "空间总量：1352M",
    //         // subtext: "Fake Data",
    //         // left: "center",
    //     },
    //     tooltip: {
    //         trigger: "item",
    //     },
    //     legend: {
    //         orient: "vertical",
    //         left: "left",
    //     },
    //     series: [
    //         {
    //             name: "Access From",
    //             type: "pie",
    //             radius: "50%",
    //             data: [
    //                 { value: 1048, name: "Search Engine" },
    //                 { value: 735, name: "Direct" },
    //                 { value: 580, name: "Email" },
    //                 { value: 484, name: "Union Ads" },
    //                 { value: 300, name: "Video Ads" },
    //             ],
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: "rgba(0, 0, 0, 0.5)",
    //                 },
    //             },
    //         },
    //     ],
    // });
}, 1000);

// const option: ECOption = {
//     // ...
// };
// const myChart = echarts.init(main);
// 绘制图表
</script>
<style lang="scss" scoped>
.orthographicimageoverview {
    .top {
        .toptext {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            margin-bottom: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
                margin-left: 10px;
            }
        }
        .toptextBox {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .toptextitem {
                font-size: 40px;
                text-align: center;
                P {
                    font-size: 16px;
                }
                button {
                    font-size: 16px;
                }
            }
        }
        .setupbarItem {
            margin-bottom: 16px;
            .itemtop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                .itemtopleft {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    div {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                        width: 110px;
                    }
                    span {
                        font-size: 12px;
                        font-weight: 400;
                        color: #999999;
                    }
                }
            }
        }
    }
    .pageItem {
        margin-top: 20px;
        .pageItembox {
            display: flex;
            justify-content: space-between;
            .serchbox {
                margin-bottom: 50px;
                font-size: 18px;
                font-weight: 500;
                color: #333333;
            }
        }
        .dot {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            .dotItem {
                width: 48%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                white-space: nowrap;
                .dotItemc {
                    width: 10px;
                    height: 8px;
                    border-radius: 2px 2px 2px 2px;
                    margin-right: 5px;
                }
                .dotItem1 {
                    background: #65789b;
                }
                .dotItem2 {
                    background: #61ddaa;
                }
                .dotItem3 {
                    background: #5b8ff9;
                }
                .dotItem4 {
                    background: #0dad9b;
                }
            }
        }
    }
    .pageBox {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .pageright {
        width: 360px;
        margin-left: 20px;
        .rightItemt {
            margin-top: 20px;
        }
        .rightItem {
            .titles {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 18px;
                font-weight: 500;
                color: #333333;
                margin-bottom: 20px;
            }
            .announcementItem {
                margin-bottom: 20px;
                font-size: 14px;
                font-weight: normal;
                color: #333333;
            }
            .recommend {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 18px;
                .bg {
                    width: 60px;
                    height: 60px;
                    margin-right: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0px 8px 32px 0px rgba(48, 104, 156, 0.1);
                    border-radius: 18px 18px 18px 18px;
                    img {
                        width: 50px;
                    }
                }
                .text {
                    width: 250px;
                    p {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                        margin-bottom: 10px;
                    }
                    div {
                        font-size: 12px;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
        }
        .rightItemend {
            .recommend {
                img {
                    width: 110px;
                    height: 66px;
                    border-radius: 6px 6px 6px 6px;
                }
                .text {
                    width: 190px;
                }
            }
        }
    }
}
</style>
<style>
.orthographicimageoverview .el-table .el-table__cell {
    padding: 18px 0;
}
</style>
